<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气提醒 - 校园助手</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#EC4899', // 主色调：粉色
                        secondary: '#F472B6', // 辅助色：浅粉色
                        accent: '#BE185D', // 强调色：深粉色
                        blue: '#3B82F6', // 蓝色：天气主题色
                        dark: '#1E293B', // 深色
                        light: '#FDF2F8'  // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 3s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .gradient-blue {
                background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
            }
            .gradient-primary {
                background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
    <script>
        // 页面加载时检查用户是否已登录
        window.addEventListener('DOMContentLoaded', function() {
            const token = localStorage.getItem('token');
            const username = localStorage.getItem('username');
            
            // 如果未登录，重定向到登录页面
            if (!token || !username) {
                window.location.href = '/login.html';
            } else {
                // 显示用户名
                document.getElementById('logged-in-username').textContent = username;
            }
            
            // 页面已移除城市搜索功能
            
            // 加载天气数据
            loadWeatherData();
        });
        
        // 退出登录功能
        function logout() {
            localStorage.removeItem('token');
            localStorage.removeItem('username');
            window.location.href = '/login.html';
        }
        
        // 返回主页
        function goToHomePage() {
            window.location.href = '/homepage.html';
        }
        
        // 加载天气数据（使用真实API）
        function loadWeatherData(location = '重庆') {
            showLoading('正在获取天气数据...');
            
            // API请求URL
            const apiUrl = `https://api.seniverse.com/v3/weather/daily.json?key=S62h_7QDO8pVQsaK7&location=${location}&language=zh-Hans&unit=c&start=0&days=3`;
            
            // 发送API请求
            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.json();
                })
                .then(data => {
                    // 处理API返回的数据
                    const weatherData = transformApiData(data);
                    displayWeatherData(weatherData);
                    hideLoading();
                })
                .catch(error => {
                    console.error('获取天气数据失败:', error);
                    showErrorMessage('获取天气数据失败，请稍后重试');
                    hideLoading();
                });
        }
        
        // 获取当前位置天气
        function getLocationWeather() {
            if (navigator.geolocation) {
                showLoading('正在获取您的位置...');
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        hideLoading();
                        showSuccessMessage('位置获取成功，请手动输入您所在的城市名称');
                        document.getElementById('city-search-input').focus();
                    },
                    function(error) {
                        hideLoading();
                        showErrorMessage('获取位置失败，请确保已授权位置访问');
                    }
                );
            } else {
                showErrorMessage('您的浏览器不支持地理定位');
            }
        }
        

        
        // 将API返回的数据转换为前端展示所需的格式
        function transformApiData(apiData) {
            if (!apiData || !apiData.results || apiData.results.length === 0) {
                return getDefaultWeatherData();
            }
            
            const result = apiData.results[0];
            const today = result.daily[0];
            
            // 天气图标映射
            const iconMap = {
                '0': 'fa-sun-o',  // 晴
                '1': 'fa-sun-o',  // 多云
                '2': 'fa-cloud-sun-o',  // 少云
                '3': 'fa-cloud',  // 晴间多云
                '4': 'fa-cloud',  // 多云
                '5': 'fa-cloud',  // 阴
                '6': 'fa-cloud-rain',  // 阵雨
                '7': 'fa-cloud-rain',  // 雷阵雨
                '8': 'fa-bolt',  // 雷阵雨伴有冰雹
                '9': 'fa-tint',  // 小雨
                '10': 'fa-tint',  // 中雨
                '11': 'fa-tint',  // 大雨
                '12': 'fa-tint',  // 暴雨
                '13': 'fa-tint',  // 大暴雨
                '14': 'fa-tint',  // 特大暴雨
                '15': 'fa-snowflake-o',  // 阵雪
                '16': 'fa-snowflake-o',  // 小雪
                '17': 'fa-snowflake-o',  // 中雪
                '18': 'fa-snowflake-o',  // 大雪
                '19': 'fa-snowflake-o',  // 暴雪
                '20': 'fa-cloud-rain',  // 雨夹雪
                '21': 'fa-smog',  // 霾
                '22': 'fa-smog',  // 雾
                '23': 'fa-smog',  // 浮尘
                '24': 'fa-smog',  // 扬沙
                '25': 'fa-smog',  // 沙尘暴
                '26': 'fa-smog',  // 强沙尘暴
                '27': 'fa-sun-o',  // 弱高吹雪
                '28': 'fa-sun-o',  // 高吹雪
                '29': 'fa-sun-o',  // 龙卷风
                '30': 'fa-smog',  // 轻雾
                '31': 'fa-tint',  // 浓雾
                '32': 'fa-tint',  // 强浓雾
                '33': 'fa-tint',  // 中度霾
                '34': 'fa-tint',  // 重度霾
                '35': 'fa-tint',  // 严重霾
                '36': 'fa-sun-o',  // 大雾
                '37': 'fa-sun-o',  // 特强浓雾
                '49': 'fa-tint',  // 雨
                '53': 'fa-smog',  // 浮尘
                '54': 'fa-smog',  // 扬沙
                '55': 'fa-smog',  // 沙尘暴
                '56': 'fa-smog',  // 强沙尘暴
                '57': 'fa-smog',  // 特强沙尘暴
                '58': 'fa-tint',  // 雾
                '59': 'fa-tint',  // 浓雾
                '60': 'fa-tint',  // 强浓雾
                '61': 'fa-tint',  // 特强浓雾
                '62': 'fa-smog',  // 轻雾
                '63': 'fa-smog',  // 霾
                '64': 'fa-smog',  // 中度霾
                '65': 'fa-smog',  // 重度霾
                '66': 'fa-smog',  // 严重霾
                '67': 'fa-sun-o',  // 晴
                '68': 'fa-sun-o',  // 多云
                '69': 'fa-cloud',  // 阴
                '70': 'fa-sun-o',  // 晴间多云
                '71': 'fa-sun-o',  // 多云
                '72': 'fa-sun-o',  // 阴
                '73': 'fa-sun-o',  // 晴
                '74': 'fa-sun-o',  // 多云
                '75': 'fa-sun-o',  // 阴
                '76': 'fa-sun-o',  // 晴
                '77': 'fa-sun-o',  // 多云
                '78': 'fa-sun-o'  // 阴
            };
            
            // 处理日期
            const daysOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            
            // 计算风力等级
            const getWindForce = (speed) => {
                if (speed < 0.3) return 0;
                if (speed < 1.6) return 1;
                if (speed < 3.4) return 2;
                if (speed < 5.5) return 3;
                if (speed < 8.0) return 4;
                if (speed < 10.8) return 5;
                if (speed < 13.9) return 6;
                if (speed < 17.2) return 7;
                if (speed < 20.8) return 8;
                if (speed < 24.5) return 9;
                if (speed < 28.5) return 10;
                if (speed < 32.7) return 11;
                return 12;
            };
            return {
                location: "重庆市北碚区",
                current: {
                    temp: parseInt(today.high),
                    condition: today.text_day,
                    icon: iconMap[today.code_day] || 'fa-cloud',
                    humidity: parseInt(today.humidity),
                    wind: parseFloat(today.wind_speed),
                    windDirection: today.wind_direction || '无风向数据',
                    windForce: getWindForce(parseFloat(today.wind_speed))
                },
                forecast: result.daily.map((day, index) => {
                    const date = new Date(day.date);
                    return {
                        day: index === 0 ? '今天' : daysOfWeek[date.getDay()],
                        tempMax: parseInt(day.high),
                        tempMin: parseInt(day.low),
                        condition: day.text_day,
                        icon: iconMap[day.code_day] || 'fa-cloud',
                        wind: parseFloat(day.wind_speed),
                        windDirection: day.wind_direction || '无风向数据',
                        windForce: getWindForce(parseFloat(day.wind_speed))
                    };
                }),
                alerts: [] // API未提供天气预警数据
            };
        }
        
        // 获取默认天气数据（当API调用失败时使用）
        function getDefaultWeatherData() {
            // 计算风力等级
            const getWindForce = (speed) => {
                if (speed < 0.3) return 0;
                if (speed < 1.6) return 1;
                if (speed < 3.4) return 2;
                if (speed < 5.5) return 3;
                if (speed < 8.0) return 4;
                if (speed < 10.8) return 5;
                if (speed < 13.9) return 6;
                if (speed < 17.2) return 7;
                if (speed < 20.8) return 8;
                if (speed < 24.5) return 9;
                if (speed < 28.5) return 10;
                if (speed < 32.7) return 11;
                return 12;
            };
            
            return {
                location: "重庆市北碚区",
                current: {
                    temp: 23,
                    condition: "多云",
                    icon: "fa-cloud",
                    humidity: 45,
                    wind: 3.2,
                    windDirection: "西南",
                    windForce: getWindForce(3.2)
                },
                forecast: [
                    { day: "今天", tempMax: 25, tempMin: 18, condition: "晴", icon: "fa-sun-o", wind: 2.8, windDirection: "西南", windForce: getWindForce(2.8) },
                    { day: "明天", tempMax: 27, tempMin: 19, condition: "多云", icon: "fa-cloud", wind: 4.2, windDirection: "南", windForce: getWindForce(4.2) },
                    { day: "后天", tempMax: 26, tempMin: 20, condition: "阴", icon: "fa-cloud", wind: 3.5, windDirection: "东南", windForce: getWindForce(3.5) }
                ],
                alerts: []
            };
        }
        
        // 显示错误消息
        function showErrorMessage(message) {
            document.getElementById('success-message').textContent = message;
            document.getElementById('success-modal').classList.remove('hidden');
        }
        
        // 显示天气数据
        function displayWeatherData(data) {
            // 设置当前日期
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            document.getElementById('update-time').textContent = `更新于 ${year}年${month}月${day}日 ${hours}:${minutes}`;
            // 设置当前天气
            document.getElementById('location-name').textContent = data.location;
            document.getElementById('current-temp').textContent = data.current.temp;
            document.getElementById('current-condition').textContent = data.current.condition;
            document.getElementById('current-icon').className = `fa ${data.current.icon} text-6xl mb-4 block`;
            document.getElementById('current-humidity').textContent = data.current.humidity;
            document.getElementById('current-wind').textContent = data.current.wind;
            
            // 添加风向和风力等级显示
            if (!document.getElementById('wind-direction-container')) {
                const weatherInfoContainer = document.querySelector('.grid.grid-cols-2');
                const windDirectionContainer = document.createElement('div');
                windDirectionContainer.className = 'bg-blue-50 p-4 rounded-lg flex flex-col items-center';
                windDirectionContainer.id = 'wind-direction-container';
                windDirectionContainer.innerHTML = `
                    <i class="fa fa-compass text-blue-500 text-xl mb-2"></i>
                    <div class="text-gray-500 text-sm">风向</div>
                    <div class="text-xl font-semibold text-gray-800" id="current-wind-direction">--</div>
                `;
                weatherInfoContainer.appendChild(windDirectionContainer);
                
                const windForceContainer = document.createElement('div');
                windForceContainer.className = 'bg-blue-50 p-4 rounded-lg flex flex-col items-center';
                windForceContainer.id = 'wind-force-container';
                windForceContainer.innerHTML = `
                    <i class="fa fa-flag text-blue-500 text-xl mb-2"></i>
                    <div class="text-gray-500 text-sm">风力等级</div>
                    <div class="text-xl font-semibold text-gray-800" id="current-wind-force">--</div>
                `;
                weatherInfoContainer.appendChild(windForceContainer);
                
                // 修改网格列数
                weatherInfoContainer.className = 'grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 md:mt-0 md:w-1/2';
            }
            
            document.getElementById('current-wind-direction').textContent = data.current.windDirection;
            document.getElementById('current-wind-force').textContent = data.current.windForce + '级';
            
            // 设置天气预报
            const forecastContainer = document.getElementById('forecast-container');
            forecastContainer.innerHTML = '';
            
            data.forecast.forEach(day => {
                const forecastCard = document.createElement('div');
                forecastCard.className = 'flex flex-col items-center p-4 bg-white rounded-lg shadow-sm';
                forecastCard.innerHTML = `
                    <div class="text-gray-600 font-medium mb-2">${day.day}</div>
                    <i class="fa ${day.icon} text-blue-500 text-2xl mb-2"></i>
                    <div class="text-gray-800 font-bold">${day.tempMax}°</div>
                    <div class="text-gray-500 text-sm">${day.tempMin}°</div>
                    <div class="text-gray-600 text-sm mt-1">${day.condition}</div>
                    <div class="text-gray-600 text-sm mt-1">${day.windDirection} ${day.windForce}级</div>
                `;
                forecastContainer.appendChild(forecastCard);
            });
            
            // 设置天气提醒
            const alertsContainer = document.getElementById('alerts-container');
            alertsContainer.innerHTML = '';
            
            if (data.alerts.length > 0) {
                data.alerts.forEach(alert => {
                    let alertClass = '';
                    if (alert.level === '蓝色') alertClass = 'bg-blue-100 text-blue-800';
                    if (alert.level === '黄色') alertClass = 'bg-yellow-100 text-yellow-800';
                    if (alert.level === '橙色') alertClass = 'bg-orange-100 text-orange-800';
                    if (alert.level === '红色') alertClass = 'bg-red-100 text-red-800';
                    
                    const alertItem = document.createElement('div');
                    alertItem.className = `flex items-start p-4 rounded-lg ${alertClass} mb-3`;
                    alertItem.innerHTML = `
                        <i class="fa fa-exclamation-triangle mt-1 mr-3"></i>
                        <div>
                            <div class="font-medium">${alert.type} ${alert.level}预警</div>
                            <div class="text-sm mt-1">${alert.message}</div>
                        </div>
                    `;
                    alertsContainer.appendChild(alertItem);
                });
            } else {
                alertsContainer.innerHTML = `
                    <div class="flex items-center justify-center p-6 text-gray-500">
                        <i class="fa fa-check-circle text-green-500 text-2xl mr-2"></i>
                        <span>暂无天气预警信息</span>
                    </div>
                `;
            }
        }
        
        // 工具函数
        function showLoading(message) {
            document.getElementById('loading-message').textContent = message;
            document.getElementById('loading-modal').classList.remove('hidden');
        }
        
        function hideLoading() {
            document.getElementById('loading-modal').classList.add('hidden');
        }
        
        // 添加提醒功能
        function addWeatherAlert() {
            showSuccessMessage('提醒已设置');
        }
    </script>
</head>
<body class="bg-gradient-to-br from-blue-50 to-white min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <button class="text-gray-500 hover:text-blue-500 transition-custom md:hidden" onclick="goToHomePage()">
                    <i class="fa fa-arrow-left text-xl"></i>
                </button>
                <i class="fa fa-cloud text-blue text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">天气提醒 - 校园助手</h1>
            </div>
            <div class="flex items-center space-x-4">
                <!-- 返回主页按钮（桌面版） -->
                <button class="hidden md:block px-4 py-2 bg-blue/10 text-blue rounded-lg hover:bg-blue/20 transition-custom" onclick="goToHomePage()">
                    <i class="fa fa-home mr-2"></i>返回主页
                </button>
                <!-- 用户信息展示 -->
                <div class="flex items-center space-x-2">
                    <span id="logged-in-username" class="text-gray-600"></span>
                    <button id="logout-button" class="text-gray-500 hover:text-red-500 transition-custom" onclick="logout()">
                        <i class="fa fa-sign-out"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 城市风景图片 -->
        <section class="mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">城市风景</h3>
                <div class="w-full h-80 rounded-lg border border-gray-200 overflow-hidden">
                    <img src="https://picsum.photos/id/1037/1200/800" alt="城市风景" class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                </div>
                <div class="mt-4 flex flex-wrap gap-2">
                    <button class="px-3 py-1 text-sm bg-blue/10 text-blue rounded-lg hover:bg-blue/20 transition-custom" onclick="getLocationWeather()">
                        <i class="fa fa-map-marker mr-1"></i>获取当前位置天气
                    </button>
                </div>
            </div>
        </section>
        <!-- 当前天气 -->
        <section class="mb-8">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="gradient-blue p-6 text-white">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <div>
                            <h2 id="location-name" class="text-2xl font-bold mb-2">加载中...</h2>
                            <p class="opacity-90" id="update-time">更新于 2024年5月24日 14:30</p>
                        </div>
                        <button class="mt-4 md:mt-0 px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg transition-custom">
                            <i class="fa fa-refresh mr-2"></i>刷新
                        </button>
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="text-center md:text-left">
                            <i id="current-icon" class="fa fa-refresh fa-spin text-6xl mb-4 block text-blue-500"></i>
                            <div class="text-5xl font-bold text-gray-800">
                                <span id="current-temp">--</span>°C
                            </div>
                            <div class="text-xl text-gray-600 mt-2" id="current-condition">加载中...</div>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-6 md:mt-0 md:w-1/3">
                            <div class="bg-blue-50 p-4 rounded-lg flex flex-col items-center">
                                <i class="fa fa-tint text-blue-500 text-xl mb-2"></i>
                                <div class="text-gray-500 text-sm">湿度</div>
                                <div class="text-xl font-semibold text-gray-800"><span id="current-humidity">--</span>%</div>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg flex flex-col items-center">
                                <i class="fa fa-wind text-blue-500 text-xl mb-2"></i>
                                <div class="text-gray-500 text-sm">风速</div>
                                <div class="text-xl font-semibold text-gray-800"><span id="current-wind">--</span> m/s</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 天气预报 -->
        <section class="mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-800">3天天气预报</h3>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-sm bg-blue/10 text-blue rounded-lg hover:bg-blue/20 transition-custom">
                            今日
                        </button>
                        <button class="px-3 py-1 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition-custom">
                            本周
                        </button>
                    </div>
                </div>
                <div id="forecast-container" class="flex overflow-x-auto pb-4 scrollbar-hide space-x-4">
                    <!-- 预报卡片将通过JS动态生成 -->
                    <div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm min-w-[100px]">
                        <div class="text-gray-600 font-medium mb-2">加载中</div>
                        <i class="fa fa-refresh fa-spin text-blue-500 text-2xl mb-2"></i>
                        <div class="text-gray-400 font-bold">--°</div>
                        <div class="text-gray-400 text-sm">--°</div>
                    </div>
                    <!-- 更多预报卡片 -->
                </div>
            </div>
        </section>

        <!-- 天气提醒 -->
        <section class="mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-800">天气提醒</h3>
                    <button class="px-3 py-1 text-sm gradient-blue text-white rounded-lg hover:opacity-90 transition-custom flex items-center shadow-md" onclick="addWeatherAlert()">
                        <i class="fa fa-plus mr-1"></i>添加提醒
                    </button>
                </div>
                <div id="alerts-container" class="space-y-3">
                    <!-- 提醒项目将通过JS动态生成 -->
                    <div class="flex items-center justify-center p-6 text-gray-500">
                        <i class="fa fa-refresh fa-spin text-blue-500 text-2xl mr-2"></i>
                        <span>正在获取天气提醒...</span>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2024 校园助手 - 天气服务</p>
        </div>
    </footer>

    <!-- 加载中模态框 -->
    <div id="loading-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full flex flex-col items-center">
            <div class="w-16 h-16 border-4 border-blue/30 border-t-blue rounded-full animate-spin mb-4"></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">处理中</h3>
            <p class="text-gray-600 text-center" id="loading-message">正在处理您的请求，请稍候...</p>
        </div>
    </div>

    <!-- 成功提示模态框 -->
    <div id="success-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-3">
                    <i class="fa fa-check text-green-600"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">成功</h3>
            </div>
            <p class="text-gray-600 mb-4" id="success-message">操作已成功完成。</p>
            <div class="flex justify-end">
                <button id="close-success-modal" class="px-4 py-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-custom border border-green-200" onclick="document.getElementById('success-modal').classList.add('hidden')">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <script>
        // 工具函数
        function showSuccessMessage(message) {
            document.getElementById('success-message').textContent = message;
            document.getElementById('success-modal').classList.remove('hidden');
        }
    </script>
</body>
</html>